<template>
  <page-wrap scrollType="bs" :initBs="initBs" :load="loadData">
    <template v-slot:RollingTop>
      <TimeChange @select="onSelectTimeChange"></TimeChange>
    </template>
    <template v-slot:extension>
      <div class="performance-container-select">
        <div class="select-item" @click="sendWaiterShow = true">
          {{ sendWaiterObj.text }}
          <div class="select-item-icon"></div>
        </div>
        <div class="select-item" @click="tableShow = true">
          {{ tableObj.text }}
          <div class="select-item-icon"></div>
        </div>
        <div class="select-item" @click="typeShow = true">
          {{ typeObj.text }}
          <div class="select-item-icon"></div>
        </div>
      </div>
    </template>

    <div class="abnormal-container">

      <div class="abnormal-container-main">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了">
          <div class="abnormal-main-item" v-for="(item, index) in itemInfo.AbnormalConsume" :key="index">
            <div class="change-title-row">
              <div class="change-title color-FF3333" v-if="item.state == '退菜'">退菜</div>
              <div class="change-title color-FFAA00" v-else-if="item.state == '换出'">换出</div>
              <div class="change-title color-FFAA00" v-else-if="item.state == '换入'">换入</div>
              <div class="change-title-right">操作人：{{ item.opUser }}</div>
            </div>
            <div class="change-content-box">
              <div class="change-content-row">
                <span class="change-content-label">{{ item.opDate }}</span>
              </div>
              <div class="change-content-row table-name">
                {{ item.roomName }}
              </div>

              <div class="change-content-row">
                <span class="change-content-label">点单人：</span>
                <span class="change-content-value">{{ item.orderUser }}</span>
              </div>
              <div class="change-content-row">
                <span class="change-content-label">商品：</span>
                <span class="change-content-value">{{ item.goodsName }}</span>
                <span class="change-content-value">（￥{{ item.salePrice }} x{{ item.orderQty }}{{ item.uomName }}）</span>
                <!-- 套餐 -->
                <div class="combo-box" v-if="item.subGoods && item.subGoods.length > 0">
                  <div class="combo-content" v-for="(good, gindex) in item.subGoods" :key="index">{{ good.goodsName }}*{{
                    good.orderQty }}{{ good.uomName }}</div>
                </div>
              </div>
              <div class="change-content-row">
                <span class="change-content-label">金额：</span>
                <span class="change-content-value color-FFAA00">￥{{ item.salePrice * item.orderQty }}</span>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
  </page-wrap>
  <z-picker v-model:show="sendWaiterShow" :columns="waiterColumns" title="操作人"
    @confirm="onWaiterConfirm($event, 'department')" />
  <z-picker v-model:show="tableShow" :columns="tableColumns" title="桌台" @confirm="onTableConfirm($event, 'department')" />
  <z-picker v-model:show="typeShow" :columns="typeColumns" title="状态" @confirm="onTypeConfirm($event, 'department')" />
</template>

<script setup>
import dayjs from 'dayjs'
import Api from '@/api'
import { transformWorkTime } from '@/utils/chenhao'
import useAppStore from '@/store/app'
const appStore = useAppStore()

// -----------------操作人弹框---------------
// 操作人 选项组
const waiterColumns = ref([{ text: "全部", value: "" }])
const get_waiter_options = (params) => {
  // 获取服务员信息
  Api.Common.AppObjProcess.Do({
    functionName: 'getWaiterList',
    contentData: {}
  })
    .then(res => {
      console.log('操作人 选项组 res:>> ', res);
      const DepotList = res.result
      // 改造数组 添加picker需要的text和value
      let modifiedObjArr = DepotList.map(obj => {
        return { ...obj, text: obj.userName, value: obj.userCode }
      })
      Array.prototype.push.apply(waiterColumns.value, modifiedObjArr)
    })
    .catch(err => {
    })
}
get_waiter_options()

let sendWaiterObj = ref({ text: '操作人' })
const sendWaiterShow = ref(false)
// 弹窗确定按钮
const onWaiterConfirm = function (ev, type) {
  sendWaiterObj.value = ev.selectedOptions[0]
  const opt = ev.selectedOptions ? ev.selectedOptions[0] : null
  postForm.userName = opt.text
  postForm.opUser = opt.value
  console.log('postForm :>> ', postForm);
  sendWaiterShow.value = false
  loadData(true)
}

// -----------------桌台弹框---------------
// 桌台 选项组
const tableColumns = ref([{ text: "全部", value: "" }])
const get_table_options = (params) => {
  // 获取服务员信息
  Api.Common.AppObjProcess.Do({
    functionName: 'getRoomInfoNew',
    contentData: {}
  })
    .then(res => {
      console.log('桌台 选项组 res:>> ', res);
      const DepotList = res.result
      // 改造数组 添加picker需要的text和value
      let modifiedObjArr = DepotList.map(obj => {
        return { ...obj, text: obj.roomName, value: obj.roomCode }
      })
      Array.prototype.push.apply(tableColumns.value, modifiedObjArr)
    })
    .catch(err => {
    })
}
get_table_options()

let tableObj = ref({ text: '桌号' })
const tableShow = ref(false)
// 弹窗确定按钮
const onTableConfirm = function (ev, type) {
  tableObj.value = ev.selectedOptions[0]
  const opt = ev.selectedOptions ? ev.selectedOptions[0] : null
  postForm.tableName = opt.text
  postForm.roomCode = opt.value
  console.log('postForm :>> ', postForm);
  tableShow.value = false
  loadData(true)
}

// -----------------状态弹框---------------
// 桌台 选项组
// operType 0 退菜 4 换入 5 换出
const typeColumns = ref([
  { text: "全部", value: "" },
  { text: "退菜", value: "0" },
  { text: "换入", value: "4" },
  { text: "换出", value: "5" }
])
// const get_type_options = (params) => {
//   // 获取服务员信息
//   Api.Common.AppObjProcess.Do({
//     functionName: 'getRoomInfoNew',
//     contentData: {}
//   })
//     .then(res => {
//       console.log('状态 选项组 res:>> ', res);
//       const DepotList = res.result
//       // 改造数组 添加picker需要的text和value
//       let modifiedObjArr = DepotList.map(obj => {
//         return { ...obj, text: obj.typeName, value: obj.typeCode }
//       })
//       Array.prototype.push.apply(typeColumns.value, modifiedObjArr)
//     })
//     .catch(err => {
//     })
// }
// get_type_options()

let typeObj = ref({ text: '状态' })
const typeShow = ref(false)
// 弹窗确定按钮
const onTypeConfirm = function (ev, type) {
  typeObj.value = ev.selectedOptions[0]
  const opt = ev.selectedOptions ? ev.selectedOptions[0] : null
  postForm.typeName = opt.text
  postForm.operType = opt.value
  console.log('postForm :>> ', postForm);
  typeShow.value = false
  loadData(true)
}

const itemInfo = ref({
  abnormalAmt: '',
  abnormalCount: '',
  AbnormalConsume: []
})
// 表单
const postForm = reactive({
  beginTime: transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[0],
  endTime: transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[1],
  pageIndex: 1,
  pageSize: 15
})
// -----------------------------------------------时间筛选-----------------------------------------------------
const onSelectTimeChange = (startTime, endTime) => {
  postForm.beginTime = startTime
  postForm.endTime = endTime
  loadData(true)
}
//---------------------------------------------------------------------------保留两位小数--------------------------------------------------
function formatNumber(num) {
  if (num) {
    return num.toFixed(2)
  } else {
    return 0
  }
}
// -------------------------------------------------------加载  下拉刷新---------------------------------------------------------
const loading = ref(false)
const finished = ref(false)
const initBs = ref(0)
const loadData = async function (refresh = false) {
  if (refresh === true) {
    postForm.pageIndex = 1
    itemInfo.value.AbnormalConsume = []
    finished.value = false
  }
  loading.value = true
  const resp = await Api.Common.AppObjProcess.Do({
    functionName: 'GetReturnChangeGoodsRecord',
    contentData: postForm
  })
  const nowList = resp.result
  console.log('获取列表 res:>> ', resp.result);
  if (refresh === true) {
    if (nowList) {
      if (nowList.length !== postForm.pageSize) {
        finished.value = true
      }
    } else {
      finished.value = true
    }
  }
  Array.prototype.push.apply(
    itemInfo.value.AbnormalConsume,
    nowList
  )

  if (nowList && nowList.length > 0) {
    postForm.pageIndex++
  } else {
    finished.value = true
  }
  loading.value = false
  if (refresh === true) {
    initBs.value++
  }
}
// -----------------------------------------------------初始化------------------------------------------------------
const onInit = function () {

  loadData(true)
}
onInit()
</script>

<style scoped lang="scss">
.performance-container-select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #222226;
  padding: 10px 12px;
  margin: 0px 0 10px;

  .select-item {
    width: 111px;
    position: relative;
    border: 1px solid #999999;
    border-radius: 4px;
    line-height: 14px;
    padding: 8px 0px 8px 11px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #cccccc;

    .select-item-icon {
      position: absolute;
      right: 12px;
      top: 13px;
      width: 11px;
      height: 6px;
      background-image: url('@/assets/svg/common/v_triangle_bottom_white.svg');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
    }
  }
}

.abnormal-container {
  .abnormal-container-main {
    padding: 0 12px;

    .abnormal-main-item {
      background: #28282e;
      border-radius: 8px;
      margin-bottom: 10px;

      .change-title-row {
        padding: 17px 12px;
        border-bottom: 1px solid #383840;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .change-title {
          font-size: 18px;
        }

        .change-title-right {
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 14px;
          color: #FFFFFF;
        }
      }

      .change-content-box {
        padding: 11px 24px;

        .change-content-row {
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 14px;
          margin-bottom: 12px;

          .change-content-label {
            color: #CCCCCC;
          }

          .change-content-value {
            color: #FFFFFF;
          }

          .combo-box {
            margin-left: 42px;

            .combo-content {
              margin-top: 3px;
              font-family: PingFang SC;
              font-weight: 500;
              font-size: 12px;
              color: #999999;
            }
          }
        }

        .table-name {
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 18px;
          color: #FFFFFF;
        }

      }

    }
  }
}

.color-FFFFFF {
  color: #FFFFFF;
}

.color-CCCCCC {
  color: #CCCCCC;
}

.color-FFAA00 {
  color: #FFAA00 !important;
}

.color-FF3333 {
  color: #FF3333 !important;
}
</style>
